<template>
    <div>
        <p class="navigation">
            <span @click="historyGo">项目管理</span>
            > 项目成员管理
        </p>
        <div class="search">
            <el-button type="primary" @click="addMember">添加成员</el-button>
        </div>
        <h2>{{projectName}}</h2>
        <base-table ref="baseTable" :tableSetting="tableSetting" @handleCommon="handleCommon" @getdata="getdata"></base-table>

        <el-dialog title="添加成员" :close-on-click-modal="false" :show-close="false" :visible.sync="dialogMance" width="500px" center>
        <el-tree :data="usresNotIn" show-checkbox node-key="id"  :props="defaultProps" ref="tree"></el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogMance=false">取 消</el-button>
            <el-button type="primary" @click="beture" :loading="loading">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
import baseTable from '@/components/table/baseTable'
import {projectUser,insertPrjUser,deletePrjUser} from "@/service/Api.js"; //接口
import { mapGetters } from 'vuex'
export default {
    components:{baseTable},
    name:"projectMent",
    props:["projectid","pn"],
    data(){
        return{
            name: sessionStorage.getItem("name"),
            // pn: sessionStorage.getItem("pn"),
            tableSetting:{
                defaulteParams:{
                    projectid:""
                },
                tableApiFn:projectUser,
				options:[
					{ prop:'id', label:'员工编号'},
                    { prop:'name', label:'员工姓名'}
                ],
                btns:[
                    { text: "移除", size: "mini", handleName: "delete", type: "danger"},
                ],
            },
            dialogMance:false,
            usresNotIn:"",
            defaultProps: {
                label: "name"
            },
            fid:"1",
            loading:false
        }
    },
    created(){
        this.fid=this.tableSetting.defaulteParams.projectid=this.projectid;
    },
    computed:{
        ...mapGetters([
            'projectName'
        ])
    },
    methods:{
        handleCommon(name,row,idx){
			if(this[name]){
				this[name](row,idx)
			}
        },
        historyGo(){
            // this.$emit('subset',{falg:0});
             this.$emit('subset', {falg: sessionStorage.getItem('showFlag')  ?  sessionStorage.getItem('showFlag') : 11 ,pn : this.pn})
            //  console.log("点击项目管理返回pn到正式项目",this.pn);
        },
        getdata(data){
            console.log(data)
            this.usresNotIn=data.usresNotIn;
        },
        addMember(){
            this.dialogMance=true;
        },
        beture(){
            let keyList=this.$refs.tree.getCheckedKeys(true);
            console.log(keyList)
            if(keyList.length==0){
                this.$message.warning("您还未选择您要添加的成员");
                return;
            }
            this.loading=true;
            insertPrjUser(keyList,this.fid).then(res => {
                console.log(res);
                this.loading=false;
                if (res.code == 0) {
                    this.$message.success("操作成功~");
                    this.$refs.baseTable.initData();
                    this.dialogMance = false;
                }else{
                    this.$message.warning(res.message);
                }
            });
        },
        delete(row){
            console.log(row, "查看移除这里的值")
            this.$confirm(`是否将${row.name}移除该项目组`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: true
            }).then( res =>{
                let data={
                    uid:row.id,
                    islea:row.isLeader,
                    projectId: this.projectid
                }
                deletePrjUser(data).then(res => {
                    console.log(res)
                    if (res.code == 0) {
                        this.$message.success("移除成功！");
                        this.$refs.baseTable.initData();
                    } else {
                        this.$message.warning(res.message);
                    }
                });
            }).catch(() => {
            });
        }
    }
}
</script>

<style scoped>
.navigation{
    background: #f0f9eb;
    color: #67c23a;
    padding: 10px;
    margin: 0;
}
.navigation span{
    cursor: pointer;
    font-weight: bold;
}
.search{
    padding: 10px 0;
}
h2{
    text-align: center;
}
</style>
